<template>
  <div class="tabs">
    <div class="radio_group">
      <span
        v-for="(tab, index) in tabs"
        :key="index"
        :class="{ cur: iscur == index }"
        @click="(iscur = index), tabChange('select' + (index + 1))"
        >{{ tab.name }}</span
      >
    </div>
    <div class="content_wrapper">
      <keep-alive>
        <component :is="tabView"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
/* eslint-disable */

import select1 from "./select01";
import select2 from "./select02";
import select3 from "./select03";

export default {
  data() {
    return {
      tabView: "select1",
      iscur: 0,
      tabs: [{ name: "我要加油" }, { name: "车友印象" }, { name: "实时订单" }]
    };
  },
  components: {
    select1,
    select2,
    select3
  },
  methods: {
    tabChange: function(tab) {
      this.tabView = tab;
    }
  }
};
</script>  

<style lang="stylus" scoped>
.radio_group {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  top: 300px;
  width: 100%;
  font-size: 16px;

  span {
    padding: 1px 15px;
  }
}

.content_wrapper {
  padding 0 15px
}

.cur {
  background: #3399ff;
  color: #fff;
}
</style>
    